<template>
  <div class="main">
    <div class="tabel">
      <MyTabel
        :title="title"
        :tabelDate="filterDate"
        :tabelDateTitle="tabelDateTitle"
        :flag="flag"
        :total="tabelDate.length"
        @changeValue="handleChange"
        @beginReflash="getRoleList"
        @editOrAdd="handleEditOrAdd"
      />
    </div>
    <MyDialog @editOrAdd="handleEditOrAdd" />
    <!-- 分页 -->
  </div>
</template>
<script>
import { getRoleListAPI } from "@/api/role";
import MyTabel from "@/components/MyTabel.vue";
import MyDialog from "@/components/MyDialog.vue";
import { ElMessage } from "element-plus";
export default {
  components: {
    MyTabel,
    MyDialog,
  },
  data: () => {
    return {
      title: "角色列表",
      //绑定搜索框
      searchValue: "",
      // 表格标题
      tabelDateTitle: [
        {
          propName: "id",
          label: "用户ID",
        },
        {
          propName: "name",
          label: "用户名",
        },
        {
          propName: "label",
          label: "标识",
        },
        {
          propName: "remark",
          label: "备注",
        },
        {
          propName: "createTime",
          label: "创建时间",
        },
        {
          propName: "updateTime",
          label: "更新时间",
        },
      ],
      //表格数据
      tabelDate: [],
      //筛选存储数据
      filterDate: [],
      //是否加载加载条
      flag: false,
    };
  },
  mounted() {
    this.getRoleList();
  },
  methods: {
    //获取角色数据
    async getRoleList() {
      this.flag = true;
      let result = await getRoleListAPI();
      this.filterDate = this.tabelDate = result;
      if (this.filterDate && this.tabelDate) {
        this.flag = false;
      }
    },
    //修改搜索框内容
    handleChange(payload) {
      let value = payload.input.value;
      if (value) {
        this.filterDate = this.filterDate.filter((item) =>
          item.name.includes(value)
        );
      } else {
        this.filterDate = this.tabelDate;
      }
    },
    //新增和编辑的操作
    async handleEditOrAdd(payload) {
      this.getRoleList();
      if (payload.id) {
        ElMessage.success("编辑成功");
      } else {
        ElMessage.success("新增成功");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
